<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>合同信息编辑</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <form id="contractInfoForm" class="form-horizontal">
                <!--报价单的主键id-->
                <input type="hidden" name="fkId" id="fkId" />
                <!--合同的主键id-->
                <input type="hidden" name="id" id="conid" th:value="${conId}"/>
                <!--父级别合同的主键id-->
                <input type="hidden" name="parentId" id="parentId" value="0"/>
                <!--款项-->
                <input type="hidden" name="moneyInfo" id="moneyInfo"/>
                <div class="box box-primary">
                    <div class="box-header">
                        <h4>基础信息</h4>
                    </div>

                    <div class="box-body">
                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">年份</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="contYear" id="contYear" autocomplete="off" placeholder="年份" th:value="${contractMainModel.contYear}"/>                        </div>
                        </div>

                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">类别</label>
                            <div class="col-md-8">
                                <select class="form-control" id="contType" name="contType"  th:value="${contractMainModel.contType}">
                                    <option th:selected="${contractMainModel.contType}==''" value="">请选择</option>
                                    <option th:selected="${contractMainModel.contType}=='对内销售'" value="对内销售">对内销售</option>
                                    <option th:selected="${contractMainModel.contType}=='对内采购'" value="对内采购">对内采购</option>
                                    <option th:selected="${contractMainModel.contType}=='对外销售'" value="对外销售">对外销售</option>
                                    <option th:selected="${contractMainModel.contType}=='对外采购'" value="对外采购">对外采购</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">卖方合同编号</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="sellCode" autocomplete="off" placeholder="卖方合同编号" th:value="${contractMainModel.sellCode}">
                            </div>
                        </div>

                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">买方合同编号</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="buyCode" autocomplete="off" placeholder="买方合同编号"  th:value="${contractMainModel.buyCode}">
                            </div>
                        </div>

                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">合作方式</label>
                            <div class="col-md-8">
                                <select class="form-control" id="contWay">
                                    <option th:selected="${contractMainModel.contWay}==''" value="">请选择</option>
                                    <option th:selected="${contractMainModel.contWay}=='对内'" value="对内">对内</option>
                                    <option th:selected="${contractMainModel.contWay}=='对外'" value="对外">对外</option>
                                    <option th:selected="${contractMainModel.contWay}=='合作制造'" value="合作制造">合作制造</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">地区</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="contAddress" autocomplete="off" placeholder="地区" th:value="${contractMainModel.contAddress}">
                            </div>
                        </div>

                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">合同名称</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="contName" autocomplete="off" placeholder="合同名称" th:value="${contractMainModel.contName}">
                            </div>
                        </div>

                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">合作方</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="contPartner" autocomplete="off" placeholder="合作方"  th:value="${contractMainModel.contPartner}">
                            </div>
                        </div>

                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">数量</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="cnt" autocomplete="off" placeholder="数量" oninput="checkNumber(this)"  th:value="${contractMainModel.cnt}">
                            </div>
                        </div>

                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">存档编号</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="saveCode" autocomplete="off" placeholder="存档编号" th:value="${contractMainModel.saveCode}">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box box-primary">
                    <div class="box-header">
                        <h4>款项信息</h4>
                    </div>
                    <div class="box-body">
                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">总包付款方式</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="totalMethod" autocomplete="off" placeholder="总包付款方式" th:value="${contractMainModel.totalMethod}">
                            </div>
                        </div>

                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">总包金额（万元）</label>
                            <div class="col-md-8 input-group">
                                <input type="text" class="form-control text-right" name="totalMoney" id="totalMoney" autocomplete="off" placeholder="总包金额" oninput="checkMoneyType(this)" th:value="${contractMainModel.totalMoney}">
                                <span class="input-group-addon">万元</span>
                            </div>
                        </div>

                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">分包付款方式</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" name="partMethod" autocomplete="off" placeholder="分包付款方式"  th:value="${contractMainModel.partMethod}">
                            </div>
                        </div>

                        <div class="form-group col-md-6" style=" margin-top: 10px;">
                            <label class="col-md-4 control-label">分包机械金额（万元）</label>
                            <div class="col-md-8 input-group">
                                <input type="text" class="form-control  text-right" name="partMoney" autocomplete="off" placeholder="分包机械金额" oninput="checkMoneyType(this)"   th:value="${contractMainModel.partMoney}">
                                <span class="input-group-addon">万元</span>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="box box-primary">
                <div class="box-header">
                    <h4>付款信息</h4>
                </div>
                <div class="box-body">
                    <form id="giveMoneyInfoForm" class="form-horizontal">

                        <div class="form-group" th:each="ListDictEnum:${ListDictEnum}">
                            <div class="col-md-1"></div>
                            <label class="col-md-1 control-label">
                                <input type="checkbox" th:name="moneyCheck+${ListDictEnum.value}" th:value="${ListDictEnum.value}" th:checked="*{ListDictEnum.isNeed}eq '1'"/>
                                &nbsp;<span th:text="${ListDictEnum.name}"></span></label>
                            <div class="col-md-2">
                                <div class="input-group">
                                    <input type="text" class="form-control text-right" th:name="bili+${ListDictEnum.value}" autocomplete="off" placeholder="付款比例"  oninput="checkMoneyType(this)"  th:value="${ListDictEnum.fundScale}">
                                    <span class="input-group-addon">%</span>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group">
                                    <input type="text" class="form-control text-right" th:name="jine+${ListDictEnum.value}" autocomplete="off" placeholder="付款金额"  oninput="checkMoneyType(this)"  th:value="${ListDictEnum.fundMoney}">
                                    <span class="input-group-addon">万元</span>
                                </div>
                            </div>
                            <div class="col-md-2 ">
                                <input type="text" class="form-control datepicker text-center " th:name="date+${ListDictEnum.value}" autocomplete="off" placeholder="预计回款时间" th:value="${ListDictEnum.fundDate}">
                            </div>
                        </div>

                    </form>
                </div>
            </div>

            <div class="box box-primary" >
                <div class="box-header">
                    <h4>附件信息</h4>
                    <form id="queryForm">
                        <!--合同的id-->
                        <input type="hidden" id="mainId" name="mainId" th:value="${conId}"/>
                        <button type="button" class="btn btn-success pull-right" id="btn-search" style="margin-top: 5px;" onclick="uploading()">
                            <span class="Bold">上传</span>
                        </button>
                    </form>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table" style="table-layout: fixed;word-break:break-all; word-wrap:break-word;"></table>
                </div>
            </div>

            <div class="box box-primary">
                <div class="box-header">
                    <button type="button" class="btn btn-success pull-right" id="btn-save" style="margin-top: 5px;" onclick="saveData()">
                        <span class="Bold">保存</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--上传模态框-->
    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-import">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">上传附件</h4>
                </div>
                <div class="modal-body">
                    <form id="importForm">
                        <div class="form-group">
                            <label>选择文件并上传</label>
                            <!--合同id-->
                            <input type="hidden" id="updConId" name="updConId" th:value="${conId}">
                            <!--报价单id-->
                            <input type="hidden" id="updQueId" name="updQueId">
                            <input id="import-file" class="btn" type="file" name="file">
                        </div>
                        <div class="form-group">
                            <label>文件类型</label>
                            <select class="form-control" name="fileType" style="width: 200px;">
                                <option value="" selected="selected">请选择</option>
                                <option value="3">商务合同</option>
                                <option value="7">技术/分交协议</option>
                                <option value="8">战略合作协议</option>
                                <option value="9">有价合同</option>
                                <option value="10">无价合同</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>文件备注</label>
                            <textarea class="form-control text-left" rows="3" style="width: 500px;" name="remark" placeholder="文件备注">
                            </textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="btn-import" type="button" class="btn btn-success">
                        <span class="Bold">确定</span>
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!--上传编辑模态框-->
    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-import-edit">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">上传附件</h4>
                </div>
                <div class="modal-body">
                    <form id="importEditForm">
                        <div class="form-group">
                            <label>选择文件并上传</label>
                            <!--文件的id-->
                            <input type="hidden" name="fileId">
                            <!--合同id-->
                            <input type="hidden" name="mainId">
                            <input id="import-file2" class="btn" type="file" name="file">
                           已上传的文件：<input type="type" name="fileName" style="border: none;"/>
                        </div>
                        <div class="form-group">
                            <label>文件类型</label>
                            <select class="form-control" name="fileType" style="width: 200px;">
                                <option value="" selected="selected">请选择</option>
                                <option value="3">商务合同</option>
                                <option value="7">技术/分交协议</option>
                                <option value="8">战略合作协议</option>
                                <option value="9">有价合同</option>
                                <option value="10">无价合同</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>文件备注</label>
                            <textarea class="form-control text-left" rows="3" style="width: 500px;" name="fileComment" placeholder="文件备注">
                            </textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="btn-import-edit" type="button" class="btn btn-success">
                        <span class="Bold">确定</span>
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

</section>

<div th:include="include :: footer"></div>

<script th:inline="javascript">

    /** 加载用户表格 */
    table = js.table.init({
        url: ctx + "file/selFileInfoByCondition",
        showColumns: false,
        showExport: false,
        pageSize:5,
        pagination : false,
        columns: [
            {
                title: '序号', field: 'id', width: '50',
                formatter: function (value, row, index, field) {
                    var pageSize = table.bootstrapTable('getOptions').pageSize;
                    var pageNumber = table.bootstrapTable('getOptions').pageNumber;
                    return pageSize * (pageNumber - 1) + index + 1;
                }
            },
            { title: "文件名称", field: 'fileName'},
            { title: "文件类型", field: 'fileType',
                formatter: function (value, row, index) {
                    if(value==3){
                        return '商务合同';
                    }else if(value==7){
                        return '技术/分交协议';
                    }else if(value==8){
                        return '战略合作协议';
                    }else if(value==9){
                        return '有价合同';
                    }else if(value==10){
                        return '无价合同';
                    }else{
                        return '';
                    }
                }
            },

            { title: "上传日期", field: 'fileUploadDate'},
            { title: "上传者", field: 'userName'},
            { title: "文件备注", field: 'fileComment'},
            {
                title: "操作",
                width: '200',
                formatter: function (value, row, index) {
                    var actions = [];

                    actions.push('<a class="btn btn-primary btn-xs" href="' + row.fileUrl + '"> 下载</a> ');
                    actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="editFileInfo(' + row.fileId + ')"> 编辑</a> ');
                    actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)"  onclick="delFileInfo(' + row.fileId + ')"> 删除</a> ');

                    return actions.join('');
                }
            }
        ]
    });

    //只选择年份
    $('#contYear').datepicker({
        format: 'yyyy',
        language: "zh-CN",
        autoclose:true,
        startView: 2,
        minViewMode: 2,
        maxViewMode: 2
    });
    //只选择月份
    // $('.datepicker').datepicker({
    //     format: 'yyyy-mm',
    //     language: "zh-CN",
    //     autoclose:true,
    //     startView: 1,
    //     minViewMode: 1,
    //     maxViewMode: 1
    // });
    //只选择日期
    $('.datepicker').datepicker({
        format: 'yyyy-mm-dd',
        language: "zh-CN",
        autoclose:true,
        startView: 0,
        minViewMode: 0,
        maxViewMode: 0
    });
    /**
     * 验证输入有效的整数和四位小数
     */
    function checkMoneyType(obj){

        obj.value = obj.value.replace(/[^-\d.]/g, "");  //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(/\-{2,}-/g, "-"); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3');//只能输入两个小数
        if (obj.value.indexOf(".") < 0 && obj.value != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
            obj.value = obj.value;
        }
        //如果上去就写- 自动替换
        if(obj.value.indexOf("-") >=0 ){
            obj.value = obj.value.replace('-', "");
        }
        //如果上去就写.   自动补个0   形成0.
        if(obj.value.indexOf(".") ==0 ){
            obj.value = "0"+obj.value;
        }
        else if(obj.value.indexOf(".") >1){
            //如果输入01.3自动变成1.3，自动去除整数部分的0
            if(obj.value.indexOf("0") ==0 ){
                obj.value = obj.value.substr(1,obj.value.length-1);
            }
        }
        //如果输入023直接变成23;自动去除整数部分的0
        if(obj.value.length>2&&obj.value.indexOf(".") <0){
            if(obj.value.indexOf("0") ==0 ){
                obj.value = obj.value.substr(1,obj.value.length-1);
            }
        }
    }

    /**
     * 只能输入数值类型的数据
     * @param obj
     */
    function checkNumber(obj){
        obj.value = obj.value.replace(/[^\d]/g, "");  //清除“数字”以外的字符
        //整数情况下，不让输入0
        if(obj.value.indexOf("0") ==0 ){
            obj.value = obj.value.substr(1,obj.value.length-1);
        }
    }

    /** 验证 */
    js.validate.init("contractInfoForm", {
        fields: {
            contYear: {validators:{notEmpty: {message: '请选择年份'}}},
            contType:{validators: {notEmpty: {message: '请选择类别'}}},
            sellCode: {validators: {notEmpty: {message: '请输入卖方合同编号'}}},
            buyCode: {validators: {notEmpty: {message: '请输入买方合同编号'}}},
            contWay: {validators: {notEmpty: {message: '请选择合作方式'}}},
            contAddress: {validators: {notEmpty: {message: '请输入地区'}}},
            contName: {validators: {notEmpty: {message: '请输入合同名称'}}},
            contPartner: {validators: {notEmpty: {message: '请输入合作方'}}},
            cnt:{validators: {notEmpty: {message: '请输入数量'}}},
            saveCode:{validators: {notEmpty: {message: '请输入存档编号'}}},
            totalMethod:{validators: {notEmpty: {message: '请输入总包付款方式'}}},
            totalMoney:{validators: {notEmpty: {message: '请输入总包金额'}}},
            partMethod:{validators: {notEmpty: {message: '请输入分包付款方式'}}},
            partMoney:{validators: {notEmpty: {message: '请输入分包机械金额'}}}
        }
    });

    /**
     * 01 在上传时，先存一下基础数据，但是不验证合理性，目的是获取一个合同的id
     */

    /**
     * 保存数据
     */
    function saveData(){
        //首先验证基础信息是否输入
        if (js.validate.isValid("contractInfoForm")) {
            //获取选择的款项
            var moneyInputData="";
            $("#giveMoneyInfoForm div.form-group").each(function () {
                var moneyDateValue=$(this).find("input[type='checkbox']").val();
                var isCheckVal=0;
                if($(this).find("input[type='checkbox']").prop("checked")){
                    //选中了
                    isCheckVal=1;
                }else{
                    //未选中
                    isCheckVal=0;
                }
                var biliValue=$(this).find("input[name^='bili']").val();
                var moneyVal=$(this).find("input[name^='jine']").val();
                var huikanDate=$(this).find("input[name^='date']").val();
                //alert("第:"+moneyDateValue+"；是否选中："+isCheckVal+"比例：" +biliValue+"金额"+moneyVal+"回时间："+huikanDate);
                moneyInputData=moneyInputData+moneyDateValue+"|"+isCheckVal+"|"+biliValue+"|"+moneyVal+"|"+huikanDate+"#";
            });
            $("#moneyInfo").val(moneyInputData);

            //执行添加
            js.submit({
                formId: "contractInfoForm",
                url: ctx + "contractManage/addContractInfo",
                data:
                    new FormData($("#contractInfoForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        //切换回页面
                        location.href = ctx + "contractManage/unContractList";
                        // window.location.href=ctx +"contractManage/unContractList";
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            });
        }
    }
    /***
     * 上传附件点击
     *
     * */
    function uploading() {

        //合同id
        $("#updConId").val($("#conid").val());
        js.modal.open("modal-import")
    }

    /**
     * 上传附件
     */
    $("#btn-import").on('click', function () {
        js.submit({
            url: ctx + "contractManage/uploadFile",
            data: new FormData($("#importForm")[0]),
            async:true,
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    //将页面上的合同id存储上。
                    /**
                     * 上传id
                     */
                    $("#updConId").val(result.data);
                    /**
                     * 基本信息添加
                     */
                    $("#conid").val(result.data);
                    /**
                     *查询文件列表的
                     */
                    $("#mainId").val(result.data);
                    js.modal.closeLoading();
                    js.table.search(table);
                } else {
                    js.modal.warning(result.msg);
                }
            }
        })
        js.modal.closeLoading();
    });

    /**
     * 删除附件
     */
    function delFileInfo(fileId){
        js.post({
            url: ctx + "file/delFileInfo",
            data:{"id":fileId},
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    js.table.refresh(table);
                } else {
                    js.modal.warning(result.msg);
                }
                js.modal.closeLoading();
            }
        });
    }
    /**
     * 编辑文件，打开模态框
     */
    function editFileInfo(fileId) {
        js.post({
            url: ctx + "file/selFileInfoById",
            data: {
                id: fileId
            },
            success: function (result) {
                $("#importEditForm").fillData(result);
                js.modal.open("modal-import-edit");
                js.modal.closeLoading();
            }
        })
    }

    /**
     * 编辑上传附件信息
     */
    $("#btn-import-edit").on('click', function () {
    js.submit({
        url: ctx + "file/editFileInfo",
        data: new FormData($("#importEditForm")[0]),
        async:true,
        success: function (result) {
            if (result.type === web_status.SUCCESS) {
                js.modal.success(result.msg);
                js.modal.closeLoading();
                js.table.search(table);
            } else {
                js.modal.warning(result.msg);
            }
        }
    })
    js.modal.closeLoading();
});

</script>